<!--  -->
<template>
  <div>
    <div class="box">
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="账户：">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码：">
          <el-input v-model="form.checkPass" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updateUser } from '@/api/user/user'
export default {
  data() {
    return {
      form: {
        id: '',
        name: '',
        password: '',
        checkPass: ''
      }
    }
  },

  mounted() {
    const user = JSON.parse(localStorage.getItem('user'))
    this.form.name = user.name
    this.form.id = user.id
  },
  methods: {
    onSubmit() {
      const pass = this.form.password.trim()
      if (pass.length === 0) {
        this.$msg.error('密码不能为空')
        return
      }
      if (pass.length < 8) {
        this.$msg.error('密码长度不少于8位')
        return
      }
      if (this.form.password === this.form.checkPass) {
        updateUser({
          id: this.form.id,
          name: this.form.name,
          password: this.form.password
        }).then(res => {
          this.$msg.success('修改成功，请重新登录')
          this.$router.push('/')
        })
        return
      }
      this.$msg.error('两次输入密码不一致')
    }
  }
}
</script>

<style scoped>
.box {
  /* width: 100%; */
  display: flex;
  justify-content: center;
}
</style>
